<template>
	<view class="">
		<uni-nav-bar title="异常订单申诉" statusBar="true" @clickLeft="back()" left-icon="left" background-color="#007AFF" color="#000"
			:border="false">
		</uni-nav-bar>
		<!-- //开启表单检验 -->
		<uni-forms :modelValue="formData" ref="form" :rules="fromrules">
			<view class="record-add-view">
				<uni-forms-item name="abnormalName">
					<view class="add-view-item">
						<!-- <image class="add-view-item-img" src="@/subPage1/static/machinery/jiashicang.png"
							mode="widthFix">
						</image> -->
						<view class="add-view-item-name">问题名称：</view>
						<uni-easyinput v-model.number="formData.abnormalName" :inputBorder="false" placeholder="请输入问题名称"
							type="text">
						</uni-easyinput>
					</view>
				</uni-forms-item>
				<uni-forms-item name="phone">
					<view class="add-view-item">
						<!-- <image class="add-view-item-img" src="@/subPage1/static/machinery/lianxidianhua.png"
							mode="widthFix">
						</image> -->
						<view class="add-view-item-name">联系电话：</view>
						<uni-easyinput v-model.number="formData.phone" :inputBorder="false" placeholder="请输入联系电话"
							type="number">
						</uni-easyinput>
					</view>
				</uni-forms-item>
				<uni-forms-item name="content">
					<view class="add-view-item">
						<!-- <image class="add-view-item-img" src="@/subPage1/static/service/fuwufang.png" mode="widthFix">
						</image> -->
						<view class="add-view-item-name">详细内容：</view>
						<uni-easyinput v-model.number="formData.content" :inputBorder="false" placeholder="请输入详细内容"
							type="text">
						</uni-easyinput>
					</view>
				</uni-forms-item>
				<uni-forms-item>
					<view class="add-view-item">
						<!-- <image class="add-view-item-img" src="@/subPage1/static/machinery/tuwenxiangqing.png"
							mode="widthFix">
						</image> -->
						<view class="add-view-item-name">上传图片：</view>
						<u-upload :fileList="fileList1" @afterRead="afterRead1" @delete="deletePic1" name="1" multiple
							deletable :maxCount="9">点击上传</u-upload>
					</view>
				</uni-forms-item>
				<view class="bottom-ios-line"></view>
			</view>
		</uni-forms>


		<view class="submit">
			<button @click="recordaddmet()" class="submit-btn">
				<!-- <image style="width: 30rpx;" class="icon-submit" mode="widthFix">
				</image> -->
				<text>提交</text>
			</button>
		</view>
	</view>

</template>

<script>
	import {
		agrServiceUrl
	} from '@/config/baseUrl.js'
	import abnormalOrderApi from '@/api/socialized-servce/order-center/abnormal-order.js'
	export default {
		data() {
			return {
				ProjectOrderDetails: JSON.parse(uni.getStorageSync('ProjectOrderDetails')) || {},
				formData: {
					abnormalName: '',
					imgList1: [],
					memberNo: uni.getStorageSync('memberNo') || void 0 || 'akhdbjhavfbjaghvf',
				},
				// 图片
				fileList1: [],
				type: '',
				fromrules: { //增加表单验证
					abnormalName: {
						rules: [{
							required: true,
							errorMessage: '输入问题名称',
						}]
					},
					phone: {
						rules: [
							{
								required: true,
								errorMessage: '输入联系电话',
							},
							{
								pattern: /^1[3456789]\d{9}$/,
								errorMessage: "请输入正确的联系电话",
							},
						]
					},
					content: {
						rules: [{
							required: true,
							errorMessage: '输入详细内容',
						}]
					},

				},
			}
		},
		onLoad(e) {

		},

		onShow() {},
		mounted() {
			this.setcollapseheight()

		},
		computed: {},
		watch: {},
		methods: {
			deletePic1(event) {
				this.fileList1.splice(event.index, 1)
				this.formData.imgList1.splice(event.index, 1)
			},
			async afterRead1(event) {
				this.type = 'image1'
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList1.length
				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList1[fileListLen]
					this.fileList1.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: `${agrServiceUrl}${result.slice(1)}`,
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: agrServiceUrl +
							`common/file/upDown/getUploadUrl?moduleType=XG_ORGANIZATION&upDownType=FTP`,
						filePath: url,
						name: 'file',
						header: {
							'token': uni.getStorageSync("satoken") || ''
						},
						formData: {},
						success: async (res) => {
							const dataObj = JSON.parse(res.data);
							const data = dataObj.data;
							console.log(data, '图片');
							resolve(data);
							if (this.type == 'image') {
								this.formData.imgList.push({
									imgId: data.slice(33),
									imgUrl: `${agrServiceUrl}${data.slice(1)}`
								})
								this.$refs.form.validateField('formData.imgList')
							} else if (this.type == 'image1') {
								this.formData.imgList1.push({
									imgId: data.slice(33),
									imgUrl: `${agrServiceUrl}${data.slice(1)}`
								})
								this.$refs.form.validateField('formData.imgList1')
							}
						},
						fail: () => {
							uni.showToast({
								title: '图片上传失败',
								icon: 'error'
							})
						}
					});
				})
			},

			// 提交方法
			recordaddmet() {

				let params = {
					...this.formData,
					abnormalType: 2,
					projectNo: this.ProjectOrderDetails.projectNo,
					executeNo: this.ProjectOrderDetails.executeNo,
					projectName: this.ProjectOrderDetails.name,
					providerNo: uni.getStorageSync('providerNo'),
					organizationNo: uni.getStorageSync('organizationNo'),
					organizationUserNo: uni.getStorageSync('userNo'),
					organizationUserName: uni.getStorageSync('userName'),
				}
				let list = []
				if (this.formData.imgList1.length) {
					this.formData.imgList1.forEach(item => {
						console.log(item);
						list.push(item.imgUrl)
					})
				}
				params.urlList = list
				delete params.imgList1

				this.$refs.form.validate().then(res => {
					console.log(params);
					uni.showLoading({
						title: '提交中'
					});
					abnormalOrderApi.add(params).then(res => {
						uni.showToast({
							title: res.code == 200 ? '添加成功' : res.message || res.msg,
							icon: res.code == 200 ? 'success' : 'none'
						});

						if (res.code == 200) {
							setTimeout(function() {
								uni.hideLoading();
								uni.navigateBack({
									delta: 1
								})
							}, 1000);
						}
					})
				}).catch(err => {
					uni.hideLoading();
					console.log(err, 'err');
				})
			},


			setcollapseheight() {
				let topheightone = uni.upx2px(136)
				// let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				winHeight = parseInt(winHeight) - topheightone
				// #ifndef H5
				winHeight = winHeight

				// #endif
				return winHeight
			},
			//--------顶部导航栏方法-----
			//返回上一步
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-date {
		height: 70rpx;
	}

	// 表单验证样式
	.uni-forms-item {
		margin-bottom: 10rpx;
	}

	::v-deep .uni-forms-item__error.msg--active {
		opacity: 1;
		z-index: 2;
		-webkit-transform: translateY(0%);
		transform: translateX(40rpx) translateY(-10rpx);
	}

	::v-deep .uni-forms-item__error {
		margin-left: 85rpx;
		margin-top: -20rpx;
	}

	.u-button {
		width: 130rpx;
		height: 60rpx;
		border-radius: 50rpx;
		text-align: center;

		.image {
			width: 80rpx;
			height: 40rpx;
		}
	}

	.jian {
		background-color: #f44;
	}

	.jia {
		background-color: #2F99FF;
	}

	.submit-btn {
		width: 268rpx;
		height: 64rpx;
		background: linear-gradient(27deg, #2F99FF 0%, #62B1FF 100%);
		box-shadow: 0rpx 0rpx 10rpx 2rpx #0082FF;
		border-radius: 40rpx;
		letter-spacing: 1rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;

		.icon-submit {
			margin-right: 10rpx;
		}
	}

	.record-add-view {
		width: 95%;
		margin: 0rpx auto;
		padding-bottom: calc(env(safe-area-inset-bottom) + 110px);

		.add-view-item {
			width: calc(100% - 40rpx);
			min-height: 60rpx;
			height: 60rpx;
			margin-top: 10rpx;
			padding: 20rpx;
			color: #959595;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: flex-start;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			font-size: 28rpx;

			.arrowdown {
				position: absolute;
				right: 20rpx;
			}

			.add-view-item-img {
				width: 26rpx;
			}

			.add-view-item-name {
				margin-left: 10rpx;
				width: 140rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				white-space: nowrap;
			}

			.add-view-item-value {
				width: 380rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;

				.hasvalueinput {
					font-size: 28rpx;
					height: 40rpx;
					line-height: 60rpx;
					color: #000000;
				}

				.nohasvalueinput {
					font-size: 28rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #ccc;
				}
			}

			.line-color-black {
				color: #000000;
			}
		}

		.button-add {
			right: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			::v-deep uni-button[size=mini] {
				padding: 0rpx 6rpx;
				width: 180rpx;
				height: 60rpx;
			}
		}
	}

	.submit {
		position: fixed;
		bottom: 144rpx;
		left: 50%;
		transform: translateX(-50%);
		padding-bottom: calc(env(safe-area-inset-bottom) + 15px);
	}
	/deep/ .uni-forms-item__error {
		margin-left: 170rpx !important;
	}
</style>